<template>
  <div class='wrapper'>
    <div class="titile">
      <h1 class="title">楼盘推荐</h1>
      <p>查看全部 <span class="iconfont ">&#xe743;</span></p>
    </div>
    <div class="tabs-box" ref="cont">
      <ul class="tabs-box-roll">
        <li class="tab" @click="btnShow" v-for="(item,index) of Blist" :key="item.id" :ref="item.id" >{{item.text}}</li>
      </ul>
    </div>
    <div class="item-wrapper">
      <swiper :options="swiperOptions">
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img
                src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200213/35dd1b38dec444da988a30bd435d9a24.jpg?x-oss-process=image/resize,w_250">
            </div>
            <div class="item-detailed">
              <h1 class="title">富力现代广.富力现代广.富力现代广.富力现代广... </h1>
              <span class="label-icon-sale">特卖</span>
              <p class="Positionsize">博罗县 | 68-249㎡</p>
              <p class="unitprice"><span>7000元/平</span></p>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img
                src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200213/35dd1b38dec444da988a30bd435d9a24.jpg?x-oss-process=image/resize,w_250">
            </div>
            <div class="item-detailed">
              <h1 class="title">富力现代广.富力现代广.富力现代广.富力现代广... </h1>
              <span class="label-icon-selection">严选</span>
              <p class="Positionsize">博罗县 | 68-249㎡</p>
              <p class="unitprice"><span>7000元/平</span></p>

            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item">
            <div class="item-img">
              <img
                src="https://images-louxun-formal.oss-cn-shenzhen.aliyuncs.com/20200213/35dd1b38dec444da988a30bd435d9a24.jpg?x-oss-process=image/resize,w_250">
            </div>
            <div class="item-detailed">
              <h1 class="title">富力现代广.富力现代广.富力现代广.富力现代广... </h1>
              <span class="label-icon-lnsale">在售</span>
              <p class="Positionsize">博罗县 | 68-249㎡</p>
              <p class="unitprice"><span>7000元/平</span></p>

            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
  //导入better-scroll
  import BScroll from 'better-scroll'

  export default {
    name: 'BuildingRecommended',
    props: {
      Blist: {
        // 传过来的值必须是数组
        type: Array,
        // 如果你不传, 则返回默认数组
        default () {
          return ["同价位楼盘","同区域楼盘"]
        }
      }
    },
    data () {
      return {
        listShow: true,
        swiperOptions: {
          pagination: '.swiper-pagination', // 初始化元素
          slidesPerView: 2,
          freeMode: false,                  //
          updateOnWindowResize: false,      // 重新计算(update和breakpoints等)
          paginationType: false,            // 数字分页器
          observeParents: true,             // 自动刷新一次
          observer: true,                    // 监听自身、父元素发生变化就会自我刷新一次，解决宽度计算问题
        }
      }
    },
    // 方法
    methods: {
      // 点击添加类名
      btnShow () {
        console.log(this.$refs[`name${item.id}`])
      }
    },
    // 当页面加载后钩子
    mounted () {
      // 页面滑动插件，滑动的是(wrapper 这个DOM ，DOM是通过ref属性定义，$refs获取该DOM)
      this.scroll = new BScroll(this.$refs.cont, {
        startX: 0,
        click: true,
        scrollX: true,
        // 忽略竖直方向的滚动
        scrollY: false,
        eventPassthrough: 'vertical'
      })
    }

  }
</script>

<style scoped lang="stylus">
  @import "~styles/varibles.styl"
  .wrapper
    wrapper()
    TopBorder()
    margin-top .6rem
    overflow hidden

  .wrapper .titile
    display flex
    justify-content space-between
    align-items center

  .wrapper .titile .title
    font-size .4rem
    font-weight 900
    line-height 1rem


  // tab 栏样式
  .tabs-box
    overflow hidden
    line-height 2rem

  .tabs-box-roll
    display inline-block
    white-space nowrap

  .tab
    border .026667rem solid #eee
    font-size .346667rem
    padding 0 .1rem
    height .8rem
    line-height .8rem
    color #2f3c4d
    margin-right .32rem
    border-radius .106667rem
    display inline-block

  // tab 预留 样式
  .item-Show
    background #a2c412
    color #f8f7f7
    border-radius 0.1rem
    border .01rem solid #a2c412
    position relative

  // 预留 样式
  .item-Show::before
    content " "
    position absolute
    bottom -0.32rem
    left 50%
    width 0
    height 0
    margin-left -.2rem
    border-width 8px
    border-style solid
    border-color #a2c412 transparent transparent

  .item-wrapper
    overflow hidden

  .item
    margin-right .1rem
    display flex
    flex-direction column
    background-color none

  .item-img img
    img()

  .item-detailed
    position relative

  .item-detailed-title
    font-size .3rem
    font-weight 900

  .item-detailed h1
    width 2rem
    font-size .32rem
    font-weight 900
    line-height .58rem
    overflowEllipsis()

  .Positionsize
    line-height .4rem
    color #798089

  .unitprice
    line-height .8rem
    color #798089

  .unitprice span
    color #ff9100
    font-weight bolder


  .label-icon-lnsale
    lnsale()
    position absolute
    top 0.1rem
    right 0

  .label-icon-sale
    sale()
    position absolute
    top 0.1rem
    right 0

  .label-icon-selection
    selection()
    position absolute
    top 0.1rem
    right 0

  .list, .listShow
    width 1.3rem
    height .8rem
    line-height .8rem
    text-align center
    margin .3rem auto
    font-weight bold

  .listShow
    background #a2c412
    color #f8f7f7
    border-radius .1rem

  .listShow:before
    content: " ";
    position: absolute;
    top: 1.05rem;
    left: 50%;
    width: 0;
    height: 0;
    margin-left -0.15rem
    border-width: 8px;
    border-style: solid;
    border-color: #a3c512 transparent transparent;
</style>

